<template>
  <div>
    <div class="grid grid-cols-3 grid-rows-2 h-(screen-60) gap-5 -m-5 p-5">
      <div class="col-span-2">
        <el-card class="h-full">
          <div slot="header">
            <i class="el-icon-setting mr-1" />
            <span>管理面板</span>
            <el-button
              type="primary"
              size="small"
              plain
              class="float-right -mt-1"
              icon="el-icon-edit"
            >
              自定义
            </el-button>
          </div>
          <div class="flex gap-3">
            <div class="large-button">
              <i class="el-icon-goods" />
              <span>自定义 1</span>
            </div>
            <div class="large-button">
              <i class="el-icon-user" />
              <span>自定义 2</span>
            </div>
            <div class="large-button">
              <i class="el-icon-star-off" />
              <span>自定义 3</span>
            </div>
            <div class="large-button">
              <i class="el-icon-picture-outline-round" />
              <span>自定义 4</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="row-span-2 ">
        <el-card class="h-full">
          <div slot="header">
            <i class="el-icon-edit-outline mr-1" />
            <span>待办事项</span>
            <el-button
              type="primary"
              size="small"
              plain
              class="float-right -mt-1"
              icon="el-icon-plus"
              @click="addProj"
            >
              添加
            </el-button>
          </div>
          <div class="overflow-y-auto">
            <el-alert
              v-for="(e,i) in proj"
              :key="i"
              :title="e.title"
              :type="e.type"
              class="mb-1"
            />
          </div>
        </el-card>
      </div>
      <div class="col-span-2">
        <el-card class="h-full">
          <div slot="header">
            <i class="el-icon-message mr-1" />
            <span>系统通知</span>
          </div>
          <div>
            <el-alert
              title="备案审核"
              type="warning"
              description="有 5 条备案需要审核"
              show-icon
              :closable="false"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      proj: []
    }
  },
  methods: {
    addProj: function () {
      this.proj.push({ title: '待办事项' })
    }
  }
}
</script>
